<section>
  <header>
    <h3>圆角图片</h3>
  </header>
  <article>
    <p><code>.img-rounded</code></p>
    <div class="example"><img src="docs/img/img1.jpg" width="200px" height="200px"
    class="img-rounded" alt=""></div>    
  </article>
</section>

<section>
  <header><h3>圆形图片</h3></header>
  <article>
    <p><code>.img-circle</code></p>
    <div class="example"><img src="docs/img/img2.jpg" width="200px" height="200px"
    class="img-circle" alt=""></div>
  </article>
</section>

<section>
  <header><h3>缩略图</h3></header>
  <article>
    <p><code>.img-thumbnail</code></p>
    <div class="example"><img src="docs/img/img3.jpg" width="200px" height="200px"
    class="img-thumbnail" alt=""></div>
  </article>
</section>

<section>
  <header>
    <h3>响应式图片</h3>
  </header>
  <article>
    <p>图片最大宽度将不会超过父级容器。<code>.img-responsive</code></p>
    <div style="width: 250px;" class="example panel"><img src="docs/img/img4.jpg" class=
    "img-responsive" alt=""></div>
  </article>
</section>


<article>
  <div class="alert with-icon">
    <i class="icon-smile"></i>
    <div class="content">
      <p>非常感谢 <a class="alert-link" href="http://weibo.com/snowinfish" target="_blank">@snowinfish</a> 为本章节提供演示所用的全部图片。</p>
      <p class="margin-zero">图片仅供 ZUI 演示使用，未经作者授权，不得用作他用。</p>
    </div>
  </div>
</article>
